<style>
	.storeList{
		display: flex;
		flex-direction: column;
		width: 750upx;
		padding-top: 110upx;
	}
	.storeList,.lease-list{
		display: flex;
		/* flex: 1; */
	}
	.lease-list .uni-media-list-logo{
		width: 180upx;
		height: 180upx;
	}
	.uni-media-list-body{
		height: 180upx;
		justify-content: space-around;
	}
	.sell-num{
		display: flex;
		/* flex: 1; */
		width: 90%;
		justify-content: space-between;
		color: #8f8f94;
	}
	.sell-num .fl{
		color: #FF0036;
	}
	.twowrap{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	
	.top-container {
		margin-bottom: 4px;
		align-items: center;
		box-sizing: border-box;
		/* display: flex;
		flex: 1; */
		position: fixed;
		/* top: 44px; */
		/* top: 80upx; */
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height:100upx ;
	}

	.clearinput {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #efeff4;
		box-sizing: border-box;
		width: auto;
		/* padding: 0 10upx; */
	}

	.with-fun {
		flex: 1;
		/* height: 40px; */
	}

	.with-fun .uni-icon {
		margin-right: 14px;
		font-size: 46upx;
		color: #aaa;
	}	
	.search-btn{
		/* width: 200upx; */
		padding: 10upx 20upx;
	}
	
</style>
<template>
	<view class="storeList">
				
		<!-- 轮播图 -->
		<swiper class="swiper" v-if="bannerList.length>0" :indicator-dots="true" :circular="true" :autoplay="true" :interval="4000" :duration="200">
			<swiper-item class="swiper-img" v-for="(item,index) in bannerList" :key="index">
				<view  class="swiper-item" @click="toUrl(item)">
					<image :src="item.img"></image>
				</view>
			</swiper-item>
		</swiper>
        <view class="top-container" :style="{top:isIos? '0':'80upx'}">
			<view class="uni-form-item uni-column clearinput">
				<view class="with-fun">
					<!-- :value="inputClearValue" @input="bindClearInput" -->
					<input class="uni-input" placeholder="搜索门店" v-model="inputClearValue" />
					<view class="uni-icon uni-icon-clear"  v-if="inputClearValue" @click="clearIcon"></view>
				</view>
				<view class="search-btn" @click="search">搜索</view>
				<!-- <uni-icon class="scan" @click="scanFun()" type="scan" size="30"></uni-icon> -->
			</view>
		</view>
		<view class="lease-list">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
					<view class="uni-media-list uni-list-cell-navigate uni-navigate-right" @click="toStoreDetail(item)">
						<image class="uni-media-list-logo" :src="item.logo"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{item.name}}</view>
							<view class="uni-media-list-text-bottom twowrap">{{item.addr}}</view>
							<view class="sell-num">
								<text class="fl">{{item.remark}}</text>
								<!-- <text class="fr">已租30</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="list.length==0" class="nodata">
			<image src="../../../static/img/nodata.png" mode=""></image>
		</view>
		<div class="nomore" v-if="!hasMore">没有更多了</div>
		
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				isIos:true,
				inputClearValue: '',
				hasMore:false,
				pageNum:1,
				pageSize:20,
				list:[
// 					{
// 						img:'https://img.yzcdn.cn/2.jpg',
// 						title:'新日电动车专卖店',
// 						content:'石家庄棉六店',
// 						discount:'全场95折'
// 					}
				],
				bannerList:[]
			};
		},
		methods:{
			bindClearInput() {
			
			},
			clearIcon() {
				this.inputClearValue = ''
			},
			toStoreDetail(item){
				uni.navigateTo({
					// url:'storeDetail/storeDetail?item='+JSON.stringify(item)
					url:'storeDetail/storeDetail?bid='+item.bid
				})
			},
			toUrl(item){
				if(item.type == 3){
					uni.navigateTo({
						url:'../storeList/storeDetail/storeDetail?bid='+item.busId
					})
				}else if(item.type == 4){
					uni.navigateTo({
						url:'../shop/shopGoods/shopGoods?gid='+item.busId
					})
				}else if(item.type == 0){
					plus.runtime.openURL(item.busId)
				}
			},
			search(){
				this.pageNum = 1
				this.getStoreList(true)
			},
			getStoreList(flag) {
				let that = this
				uni.request({
					url: this.httpUrl + 'business/list4Page',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						name:that.inputClearValue,
						pageNum: that.pageNum,
						pageSize: that.pageSize,
						category:1,
						status:1
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
							// that.list = res.data.data.data
							if(flag){
								that.list = res.data.data.data
							}else{
								that.list.push(...res.data.data.data)
							}
							if(res.data.data.data.length < that.pageSize){
								that.hasMore = false
							}else{
								that.hasMore = true
								that.pageNum ++
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			getBanner(){
				let that = this
				uni.request({
					url: this.httpUrl + 'banner/listByCondition',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						module: 3
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							that.bannerList = res.data.data
							// that.goodsList.push(...res.data.data.data)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			}
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.getStoreList(true)
			this.getBanner()
			uni.stopPullDownRefresh();
		},
		onReachBottom(){
		  if(this.hasMore){
			  this.getStoreList(false)
		  }
		},
		mounted() {
			this.getStoreList(false)
			this.getBanner()
			let that = this
			
			uni.getSystemInfo({
				success: function (res) {
					if(res.platform== 'ios'){
						that.isIos = true
					}
				}
			});
		}
	}
</script>
